<template>
  <view class="ai-explore-container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">AI艺术看展</text>
      <text class="subtitle">拍摄展览照片或输入展览信息，获取专业艺术解读</text>
    </view>

    <!-- 主要功能区域 -->
    <view class="main-content">
      <!-- 展览分析入口 -->
      <view class="analysis-entry">
        <view class="entry-card">
          <view class="card-icon">🎨</view>
          <view class="card-title">开始艺术分析</view>
          <view class="card-desc">AI将为您提供专业的艺术解读和展览分析</view>
          <button class="start-btn" @click="startAnalysis">开始分析</button>
        </view>
      </view>
      
    </view>
    
    <!-- 自定义底部导航栏 -->
    <CustomTabBar :currentIndex="1" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 开始艺术分析
function startAnalysis() {
  uni.navigateTo({
    url: '/pages/ai-explore/analysis-input'
  });
}
</script>

<style lang="scss">
.ai-explore-container {
  min-height: 100vh;
  background: #1a1a1a;
  padding: 20px;
  padding-bottom: 120px; /* 为底部导航栏留出空间 */
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding-top: 20px;
}

  .title {
  display: block;
  font-size: 28px;
  font-weight: 700;
    color: #ffffff;
  margin-bottom: 15px;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.subtitle {
  display: block;
  font-size: 16px;
  color: #cccccc;
  line-height: 1.5;
  max-width: 300px;
  margin: 0 auto;
}

.main-content {
  max-width: 500px;
  margin: 0 auto;
}

.analysis-entry {
  margin-bottom: 40px;
}

.entry-card {
  background: #333333;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  /* 去除细边线，统一无边框风格 */
  /* border: 1px solid rgba(212, 175, 55, 0.2); */
}

.card-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 22px;
  font-weight: 600;
    color: #ffffff;
  margin-bottom: 15px;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.card-desc {
  font-size: 16px;
  color: #cccccc;
  line-height: 1.5;
  margin-bottom: 25px;
}

.start-btn {
    background: linear-gradient(135deg, #d4af37, #f4e4bc);
    color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 10px 40px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    transition: all 0.3s ease;
  outline: none;
  &::after { border: none; }
    
    &:active {
      background: linear-gradient(135deg, #c19b26, #e6d4a8);
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
  }
}

/* 已移除功能说明块的样式 */
</style>
